<template>
  <div class="container">
    <div v-show="showDetail">
      <div class="weui_cells_title">就诊卡：</div>
      <div class="weui_cells weui_cells_access" style="margin-top:10px;">
        <a @click="selectCard" class="weui_cell" href="javascript:;">
          <div class="weui_cell_hd">
            <i class="fa fa-credit-card fa-2x icon-color" style="width:45px;margin-right:5px;display:block;"></i>
          </div>
          <div class="weui_cell_bd weui_cell_primary">
            <p>{{card?card.name:''}} <span style="margin-left:15px;" class="blue_tag">{{card?card.type:''}}</span></p>
            <p>{{card?card.num:''}}</p>
          </div>
          <div class="weui_cell_ft">
            选就诊卡
          </div>
        </a>
      </div>
      <div class="weui_cells_title" v-show="showEmpty">{{emptyMsg}}</div>
      <div v-show="!showEmpty">
        <div class="weui_cells" style="margin-top:10px;">
          <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
              <p>
                <span class="label">入院日期</span>
                <span class="info">{{inDate}}</span>
              </p>
            </div>
          </div>
          <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
              <p>
                <span class="label">预缴金余额</span>
                <span class="info">{{prepayBalance}} 元</span>
              </p>
            </div>
          </div>
        </div>
        <div class="weui_cells weui_cells_form">
          <div class="weui_cell" :class="{'weui_cell_warn' : invalidPrepayFee}">
            <div class="weui_cell_hd">
              <label class="weui_label">充值金额</label>
            </div>
            <div class="weui_cell_bd weui_cell_primary">
              <input class="weui_input" v-model="prepayFee" style="padding-left: 15px;" type="number" placeholder="请输入充值金额">
            </div>
            <div class="weui_cell_ft">
              <i class="weui_icon_warn"></i>
            </div>
          </div>
        </div>
        <a @click="doPrepay" href="javascript:;" style="margin:10px 8px;" class="weui_btn weui_btn_primary">确认缴纳</a>
        <div>
          <p v-show="sugFee != ''" style="padding:3px;" class="am-ft-sm am-ft-gray">
            <span class="am-ft-orange"><i class="fa fa-info-circle"></i></span> 建议充值金额为：{{sugFee}} 元！
          </p>
          <p style="padding:3px;" class="am-ft-sm am-ft-gray">
            <span class="am-ft-orange"><i class="fa fa-info-circle"></i></span> 充值金额请输入100的倍数！
          </p>
          <p style="padding:3px;" class="am-ft-sm am-ft-gray">
            <span class="am-ft-orange"><i class="fa fa-info-circle"></i></span> 充值后,您的预交金余额不能大于1万元！
          </p>
        </div>
      </div>
    </div>
    <div class="reg-success" v-show="showSuccess">
      <div class="weui_msg">
        <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
        <div class="weui_text_area">
          <h2 class="weui_msg_title">缴纳成功</h2>
        </div>
        <div class="weui_opr_area">
          <p class="weui_btn_area">
            <a href="javascript:;" @click="goOrderDetail" class="weui_btn weui_btn_primary">查看详情</a>
          </p>
        </div>
      </div>
    </div>
    <div class="reg-failed" v-show="showFailed">
      <div class="weui_msg">
        <div class="weui_icon_area"><i class="weui_icon_warn weui_icon_msg"></i></div>
        <div class="weui_text_area">
          <h2 class="weui_msg_title">缴纳失败</h2>
          <p class="weui_msg_desc">{{failedMsg}}</p>
        </div>
        <div class="weui_opr_area">
          <p class="weui_btn_area">
            <a href="javascript:;" @click="gotoPortal" class="weui_btn weui_btn_primary">返回首页</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.blue_tag {
  background-color: #0ae;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.orange_tag {
  background-color: #ff8208;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

span.label {
  display: inline-block;
  width: 100px;
}

span.info {
  color: #0ae;
}

.weui_label {
  display: block;
  width: 80px;
}
</style>
<script type="text/ecmascript-6">
import $ from 'jquery'
import {
  showCommonToast,
  hideCommonToast,
  showLoadingToast,
  hideLoadingToast
} from '../../vuex/actions'
import _ from 'underscore'

export default {
  name: 'doPrepayView',
  data: function () {
    return {
      showEmpty: false,
      emptyMsg: '',
      inDate: '',
      prepayBalance: '',
      patientId: '',
      visitId: '',
      sugFee: '',
      prepayFee: '',
      invalidPrepayFee: false,
      orderId: -1,
      orderNo: '',
      canPrepay: true,
      showDetail: true,
      showSuccess: false,
      showFailed: false,
      failedMsg: ''
    }
  },
  vuex: {
    getters: {
      card: ({ card }) => _.findWhere(card.cards, { isSelected: true })
    },
    actions: {
      showCommonToast,
      hideCommonToast,
      showLoadingToast,
      hideLoadingToast
    }
  },
  methods: {
    selectCard: function () {
      this.$router.go({ name: 'selectCard' })
    },
    getInpatientPrepayInfo: function () {
      if (!this.card) {
        return
      }
      var self = this

      this.$ajax.get('GetInpatientPrepayInfo', 'Inpatient', {
        cardId: this.card.id
      }).then(function (data) {
        if (data.ResultCode !== '0') {
          self.showEmpty = true
          self.emptyMsg = data.ResultMsg
        } else {
          self.inDate = data.InDate
          self.prepayBalance = data.PrepayBalance
          self.patientId = data.PatientId
          self.visitId = data.VisitId
        }
      })
    },
    doPrepay: function () {
      if (!this.canPrepay) {
        return
      }

      if (!this.card || !this.card.id || this.card.id === -1) {
        this.showCommonToast({ msg: '请选择就诊卡' })
        return
      }

      if (this.prepayFee === '') {
        this.invalidPrepayFee = true
        this.showCommonToast({ msg: '请输入充值金额' })
        return false
      }

      var prepayFee = parseInt(this.prepayFee)
      if (isNaN(prepayFee) || prepayFee <= 0) {
        this.invalidPrepayFee = true
        this.showCommonToast({ msg: '充值金额必须为正整数' })
        return false
      }
      if (prepayFee % 100 !== 0) {
        this.invalidPrepayFee = true
        this.showCommonToast({ msg: '充值金额必须为100的倍数' })
        return false
      }

      var prepayBalance = Number(this.prepayBalance)
      if (prepayBalance + prepayFee > 10000) {
        this.invalidPrepayFee = true
        this.showCommonToast({ msg: '充值后,您的预交金余额不能大于1万元' })
        return false
      }

      this.canPrepay = false
      this.showLoadingToast({ msg: '正在缴纳...' }, false)
      var self = this
      this.$ajax.get('CreatePrepayOrder', 'Inpatient', {
        cardId: this.card.id,
        patientId: this.patientId,
        visitId: this.visitId,
        money: prepayFee
      }, false).then(function (data) {
        if (data.ResultCode !== '0') {
          self.failedMsg = data.ResultMsg
          self.showDetail = false
          self.showSuccess = false
          self.showFailed = true
          self.hideLoadingToast()
        } else {
          self.orderId = data.OrderId
          self.orderNo = data.OrderNo
          self.callPay(data.PayString)
        }
      })
    },
    gotoPortal: function () {
      this.$router.replace({ name: 'portal' })
    },
    goOrderDetail: function () {
      this.$router.replace({ name: 'prepayOrderDetail', params: { orderId: this.orderId } })
    },
    callPay: function (payString) {
      if (payString === '') {
        this.paySucceed()
        return
      }
      // 支付操作
      var form = $(payString)
      form.submit()
    },
    payFailed: function () {
      this.$ajax.get('PayFailed', 'Inpatient', {
        orderId: this.orderId
      }, false).then(function (data) {

      })

      this.hideLoadingToast()

      this.showCommonToast({ msg: '您已取消支付' })
      window.history.go(-1)
    },
    paySucceed: function () {
      var self = this
      this.$ajax.get('GetPrepayStatus', 'Inpatient', {
        orderId: this.orderId
      }, false).then(function (data) {
        if (data.ResultCode !== '0') {
          self.hideLoadingToast()
          window.history.go(-1)
        } else {
          if (data.PrepayStatus === '1') {
            self.failedMsg = data.FailedMsg
            self.showDetail = false
            self.showSuccess = false
            self.showFailed = true
            self.hideLoadingToast()
          } else if (data.PrepayStatus === '0') {
            self.showDetail = false
            self.showSuccess = true
            self.showFailed = false
            self.hideLoadingToast()
          } else {
            window.setTimeout(function () {
              self.paySucceed()
            }, 500)
          }
        }
      })
    }
  },
  ready: function () {
    var sugFee = this.$route.query.sugFee
    if (sugFee) {
      this.sugFee = sugFee
    }

    this.$watch('card', function (val) {
      this.getInpatientPrepayInfo()
    })

    this.getInpatientPrepayInfo()

    this.$watch('prepayFee', function (newVal, oldVal) {
      if (newVal !== '') {
        this.invalidPrepayFee = false
      }
    })
  }
}
</script>
